<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <button @click="xiugai">点我修改数据</button>
        <input type="text">
        <keep-alive>
        <div is="ComA" v-if="flag"></div>
        <div is="ComB" v-else="!flag"></div>
    </keep-alive>
        <button @click="qiehuan" >点我切换</button>
    </div>
</body>
<template id="ComA">
    <div>
        <a href="javascript:;">{{message}}</a>
        <input type="text">
        <!-- <button @click="xiuga">点我修改</button> -->
    </div>
</template>
<template id="ComB">
    <div>
        <a href="javascript:;">{{message}}</a>
        <input type="text">
        <!-- <button @click="xiuga">点我修改</button> -->
    </div>
</template>
<script src="../../vue.js"></script>
<script>
     let ComB = {
        template:"#ComB",
        data(){
            return{
                message:"我是ComB"
            }
        },
        methods:{
            xiuga(){
               
            }
        },
        activated(){
            console.log("已经启用ComB");
        },
        deactivated(){
            console.log("已经停用ComB");
        },
        beforeCreate(){
            console.log("beforeCreate子组件");
        },
        created(){
            console.log("created子组件");
        },
        beforeMount(){
            console.log("beforeMount子组件");
        },
        Mounted(){
            console.log("Mounted子组件");
        },
        beforeUpdate(){
            console.log("updated子组件");
        },
        updated(){
            console.log("updated子组件");
        },
        destroyed(){
            console.log("destroyed子组件");
        },
    }
    let ComA = {
        template:"#ComA",
        data(){
            return{
                message:"我是ComA"
            }
        },
        methods:{
            xiuga(){
                this.message="修改了"
            }
        },
        activated(){
            console.log("已经启用ComA");
        },
        deactivated(){
            console.log("已经停用ComA");
        },
        beforeCreate(){
            console.log("beforeCreate子组件");
        },
        created(){
            console.log("created子组件");
        },
        beforeMount(){
            console.log("beforeMount子组件");
        },
        Mounted(){
            console.log("Mounted子组件");
        },
        beforeUpdate(){
            console.log("updated子组件");
        },
        updated(){
            console.log("updated子组件");
        },
        destroyed(){
            console.log("destroyed子组件");
        },
    }
    new Vue({
        el:"#app",
        data:{
            message:"数据",
            flag:true
        },
        components:{
            ComA,ComB
        },
        methods:{
            xiugai(){
                this.message="修改了"
            },
            qiehuan(){
              return  this.flag=!this.flag
            }
        },
        beforeCreate(){
            console.log("beforeCreate");
        },
        created(){
            console.log("created");
        },
        beforeMount(){
            console.log("beforeMount");
        },
        Mounted(){
            console.log("Mounted");
        },
        beforeUpdate(){
            console.log("updated");
        },
        updated(){
            console.log("updated");
        },
        destroyed(){
            console.log("destroyed");
        },
    })
    //   vue共八个生命周期
    //   beforeCreate() 初始化阶段，应用不多
    //   created()当实例创建完成后被立即调用 该阶段完成了对data中的数据的observer，该阶段可以处理一些异步任务 ajax
    //   挂载阶段
    //   beforeMount() 在挂载开始之间被调用 应用不多 
    //   Mounted() 该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了$el属性，该阶段可以通过DOM操作来对组件内部元素进行处理了
    //   beforeUpdate()数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态
    //   updated() 由于数据的变更导致的视图重新渲染，可以通过DOM操作来获取视图的最新状态
    //   beforeDestroy() 实例销毁之前调用，移除一些不必要的冗余数据，比如定时器
    //   destroyed() Vue 实例销毁后调用
    //   app.$destroy() 销毁
</script>
</html>